<template>
	<div id="address">
		<div class="addadd-top">
			<router-link to="/home/mine">
				<img src="../../assets/address/zuo.png" />
			</router-link>
			<p>管理收货地址</p>
			<router-link to="/addaddress">
				<span>新建</span>
			</router-link>
		</div>
		<div class="mine-address">
			我的收货地址
		</div>
		<div class="body_address" v-for="itt in dlist">
			<div class="addresses1">
				<p>{{itt.name}}</p>
				<p>{{itt.tel}}</p>
			</div>
			<div class="addresses2">
				<p>{{itt.add}}</p>
				<router-link to="/editaddress">
					<img :src="itt.url" />
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				dlist:[
					{
						name:"傻娟",
						tel:"18911023261",
						add:"北京市海淀区西三环北路 2号院 北京理工大学 国防科技园2号楼 10层",
						url:require("../../assets/address/jiantou.png")
					},{
						name:"傻娟",
						tel:"18911023261",
						add:"北京市海淀区西三环北路 2号院 北京理工大学 国防科技园2号楼 13层",
						url:require("../../assets/address/jiantou.png")
					}
				]
			}
		}
	}
</script>

<style scoped>
	#address{
		margin: 0;
		padding: 0;
		height: 100%;
		position: fixed;
		width: 100%;
		background:#f8f8f8;
	}
	.mine-address{
		padding: 16px 12px 18px;
		font-size: 14px;
		padding-left: 18px;
		color: #333333;
	}
	.addadd-top{
		display: flex;
		justify-content: space-between;
		padding-left:20px ;
		padding-right:20px ;
		align-items: center;
		text-align: center;
		height: 44px;
		background: #FFFFFF;
	}
	.addadd-top img{
		height: 16px;
		width: 9.3px;
	}
	.addadd-top p{
		font-size: 16px;
	}
	.addadd-top span{
		font-size: 14px;
	}
	.body_address{
		background: #FFFFFF;
		border-radius: 4px;
		margin-bottom: 16px;
		margin-left: 18px;
		margin-right: 18px;
	}
	.addresses1{
		display: flex;
		padding-top: 12px;
		justify-content: space-around;
		justify-content: flex-start; 
	}
	.addresses1 p{
		font-size: 14px;
		color: #999999;
		padding-bottom: 12px;
		padding-left: 16px;
		padding-right: 66px;
	}
	.addresses2{
		display: flex;
		margin-left: 18px;
		margin-right: 18px;
		align-items: flex-start;
		padding-bottom: 18px;
	}
	.addresses2 p{
		padding-right:39px ;
		font-size: 14px;
		flex: 1;
	}
	.addresses2 img{
		width: 8px;
		height: 16px;
	}
</style>
